import './index.css';
import './img/01.jpeg';
import './img/02.jpeg';
import './img/03.jpeg';
import './img/04.jpeg';

const sliderData = [
    {
        url: '../../img/01.jpeg',
    },
    {
        url: '../../img/02.jpeg',
    },
    {
        url: '../../img/03.jpeg',
    },
    {
        url: '../../img/04.jpeg',
    },
];
const img = document.querySelector('img');
// eslint-disable-next-line no-unused-vars
const p = document.querySelector('p');
// 如果是点击的话需要获取所有的li
const li = document.querySelectorAll('li');
const btn_front = document.querySelector('.front');
const btn_next = document.querySelector('.next');
// 时间从0开始
let time = 0;
// 自动播放
let shijian = 0;
function changePage() {
    img.src = sliderData[time].url;
    // p.innerHTML = sliderData[time].title;
    const active = document.querySelector('.active');
    active.classList.remove('active');
    const li_a = document.querySelector(`li:nth-child(${time + 1})`);
    li_a.classList.add('active');
}

// 下一张函数
function nextPage() {
    time++;
    changePage();
    if (time >= sliderData.length - 1) {
        time = -1;
    }
}
// 自动播放下一张的函数
function nextPageAuto() {
    shijian = setInterval(function () {
        nextPage();
    }, 1000);
}
nextPageAuto();
// 鼠标悬停时,暂停自动播放
const box = document.querySelector('.box');
box.addEventListener('mouseenter', function () {
    clearInterval(shijian);
});
box.addEventListener('mouseleave', function () {
    // 在设置时间函数前,先将其关掉,避免重复时间函数
    clearInterval(shijian);
    nextPageAuto();
});
// 点击小圆点时能够跳转到对应的图片和文字
for (let click = 0; click < sliderData.length; click++) {
    li[click].addEventListener('click', function () {
        img.src = sliderData[click].url;
        // p.innerHTML = sliderData[click].title;
        const active = document.querySelector('.active');
        active.classList.remove('active');
        const li_a = document.querySelector(`li:nth-child(${click + 1})`);
        li_a.classList.add('active');
        time = click;
        // console.log(time);
    });
}
// 点击播放下一张
btn_next.addEventListener('click', function () {
    nextPage();
});
// 点击播放上一张
btn_front.addEventListener('click', function () {
    time--;
    // 如果是第一张的上一张,则显示最后一张
    if (time < 0) {
        time = sliderData.length - 1;
    }
    changePage();
});
